<template>
  <div>
    <div class="form_wrap">
      <el-form label-width="150px" style="margin-top:10px">
        <el-row class="toBe">
          <el-col :span="2">
            审批信息:
          </el-col>
          <el-col :span="22">
            <el-row>
              <el-col :xl="6" :lg="7">
                <el-form-item class="posInput" label="实际担保金额:">
                  <span class="pos left">小写</span>
                  <el-input
                    v-model="ht.contractGuaranteeMoney"
                    :disabled="true"
                    @input="this.$forceUpdate()"
                  ></el-input>
                  <span class="pos right">（万元）</span>
                </el-form-item>
              </el-col>
              <el-col :xl="6" :lg="7">
                <el-form-item class="posInput ts" label="实际担期限:">
                  <el-input
                    v-model="ht.contractGuaranteeMonth"
                    :disabled="true"
                    @input="this.$forceUpdate()"
                  ></el-input>
                  <span class="pos right">（个月）</span>
                </el-form-item>
              </el-col>
              <el-col :xl="6" :lg="7">
                <el-form-item class="posInput" label="还款方式:">
                  <el-input
                    v-model="ht.contractRepaymentModel"
                    :disabled="true"
                    @input="this.$forceUpdate()"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :xl="2" :lg="3" style="line-height: 20px;">
                <el-button
                  @click="openDiaGua"
                  v-if="showGuaranteeMoneyBtn && orderStatus==3"
                  >{{ guaTitle }}</el-button
                >
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
      <el-form label-width="150px" style="margin-top:10px">
        <el-row>
          <el-col :span="2">
            权证信息:
          </el-col>
          <el-col :span="22">
            <el-row>
              <el-col :xl="6" :lg="7">
                <el-form-item label="抵押时间:">
                  <el-date-picker
                    v-model="qz.pledgeTime"
                    type="datetime"
                    placeholder="选择日期时间"
                    align="right"
                    :disabled="true"
                    :picker-options="pickerOptions"
                    @input="this.$forceUpdate()"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :xl="6" :lg="7">
                <el-form-item label="公证时间:">
                  <el-date-picker
                    v-model="qz.justTime"
                    type="datetime"
                    placeholder="选择日期时间"
                    align="right"
                    :disabled="true"
                    :picker-options="pickerOptions"
                    @input="this.$forceUpdate()"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :xl="2" :lg="3" style="line-height: 20px;">
                <el-button
                  @click="openWarrant"
                  v-if="showUpWarrantBtn && orderStatus==3"
                  >{{ warrantTitle }}</el-button
                >
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
      <el-form label-width="150px" style="margin-top:10px">
        <el-row>
          <el-col :span="2">
            财务信息:
          </el-col>
          <el-col :span="22">
            <el-row style="text-align:left">
              <el-col :span="24"
                >意向申请金额：{{ yx.intentionMoney }}，意向点数{{
                  yx.intentionRatio
                }}，意向附加费{{ yx.intentionAddMoney }}，意向服务费{{
                  yx.intentionServerMoney
                }}</el-col
              >
            </el-row>
            <el-row>
              <el-col :xl="6" :lg="7">
                <el-form-item class="posInput ts" label="核算点数:">
                  <el-input
                    v-model="cw.calculateRatio"
                    :disabled="true"
                    @input="this.$forceUpdate()"
                  ></el-input>
                  <span class="pos right">（%）</span>
                </el-form-item>
              </el-col>
              <el-col :xl="6" :lg="7">
                <el-form-item label="核算附加费:">
                  <el-input
                    v-model="cw.calculateAddMoney"
                    :disabled="true"
                    @input="this.$forceUpdate()"
                  ></el-input>
                  <span class="pos right">（元）</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :xl="6" :lg="7">
                <el-form-item class="posInput ts" label="收费金额:">
                  <el-input
                    v-model="cw.chargeMoney"
                    :disabled="true"
                    @input="this.$forceUpdate()"
                  ></el-input>
                  <span class="pos right">（元）</span>
                </el-form-item>
              </el-col>
              <el-col :xl="6" :lg="7">
                <el-form-item label="实际收费时间:">
                  <el-date-picker
                    v-model="cw.chargeInvoiceTime"
                    type="datetime"
                    placeholder="选择日期时间"
                    align="right"
                    :disabled="true"
                    :picker-options="pickerOptions"
                    @input="this.$forceUpdate()"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :xl="6" :lg="7">
                <el-form-item label="担保费交付时间:">
                  <el-date-picker
                    v-model="cw.chargeTime"
                    type="datetime"
                    placeholder="选择日期时间"
                    align="right"
                    :disabled="true"
                    :picker-options="pickerOptions"
                    @input="this.$forceUpdate()"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :xl="2" :lg="3" style="line-height: 20px;">
                <el-button
                  @click="openDiaCharge"
                  v-if="showChargeBtn && (orderStatus==3 || orderStatus==4)"
                  >{{ chargeTitle }}</el-button
                >
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!--弹框-->
    <el-dialog
      title="修改信息"
      :visible.sync="dialogTableVisible"
      v-if="dialogTableVisible"
    >
      <el-form
        v-if="showdis == 1"
        :model="diaht"
        ref="diaht"
        label-width="150px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item
              class="posInput"
              label="实际担保金额:"
              prop="contractGuaranteeMoney"
            >
              <span class="pos left">小写</span>
              <el-input v-model="diaht.contractGuaranteeMoney"></el-input>
              <span class="pos right ht-right">（万元）</span>
            </el-form-item></el-col
          >
          <el-col :span="12"
            ><el-form-item
              class="posInput ts"
              label="实际担期限:"
              prop="contractGuaranteeMonth"
            >
              <el-input v-model="diaht.contractGuaranteeMonth"></el-input>
              <span class="pos right ht-right">（个月）</span>
            </el-form-item></el-col
          >
          <el-col :span="12">
            <el-form-item
              class="posInpt"
              label="还款方式:"
              prop="contractRepaymentModel"
            >
              <!-- <el-input v-model="diaht.contractRepaymentModel"></el-input> -->
              <el-select v-model="diaht.contractRepaymentModel">
                <el-option
                  v-for="item in contractRepaymentModel"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="dialog-footer">
          <el-button @click="dialogTableVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitGua">确 定</el-button>
        </div>
      </el-form>

      <el-form label-width="150px" v-if="showdis == 2" :model="diacw">
        <el-row>
          <el-col :span="12">
            <el-form-item
              class="posInput ts"
              label="核算点数:"
              prop="chargeMoney"
            >
              <el-input
                v-model="diacw.calculateRatio"
                @blur="countChangeMoney"
              ></el-input>
              <span class="pos right ht-right">（%）</span>
            </el-form-item></el-col
          >
          <el-col :span="12">
            <el-form-item
              class="posInput ts"
              label="核算附加费:"
              prop="chargeMoney"
            >
              <el-input
                v-model="diacw.calculateAddMoney"
                @blur="countChangeMoney"
              ></el-input>
              <span class="pos right ht-right">（ 元）</span>
            </el-form-item></el-col
          >
          <el-col :span="12">
            <el-form-item
              class="posInput ts"
              label="收费金额:"
              prop="chargeMoney"
            >
              <el-input v-model="diacw.chargeMoney"></el-input>
              <span class="pos right ht-right">（元）</span>
            </el-form-item></el-col
          >
          <el-col :span="12"
            ><el-form-item label="选择实际收费时间:" prop="chargeInvoiceTime">
              <el-date-picker
                v-model="diacw.chargeInvoiceTime"
                type="datetime"
                placeholder="选择日期时间"
                align="right"
                :picker-options="pickerOptions"
              >
              </el-date-picker> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="担保费交付时间:" prop="chargeTime">
              <el-date-picker
                v-model="diacw.chargeTime"
                type="datetime"
                placeholder="选择日期时间"
                align="right"
                :picker-options="pickerOptions"
              >
              </el-date-picker> </el-form-item
          ></el-col>
        </el-row>
        <div class="dialog-footer">
          <el-button @click="dialogTableVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitcharge">确 定</el-button>
        </div>
      </el-form>

      <el-form
        label-width="150px"
        v-if="showdis == 3"
        :model="diaqz"
        ref="diaqz"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="抵押时间:" prop="pledgeTime">
              <el-date-picker
                v-model="diaqz.pledgeTime"
                type="datetime"
                placeholder="选择日期时间"
                align="right"
                :picker-options="pickerOptions"
              >
              </el-date-picker> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="公证时间:" prop="justTime">
              <el-date-picker
                v-model="diaqz.justTime"
                type="datetime"
                placeholder="选择日期时间"
                align="right"
                :picker-options="pickerOptions"
              >
              </el-date-picker> </el-form-item
          ></el-col>
        </el-row>
        <div class="dialog-footer">
          <el-button @click="dialogTableVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitwarrant">确 定</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  getUpForm,
  postGuaranteeMoney,
  postCharge,
  getWarrant,
  postWarrant,
  getProductUrl,
  getIntention,
  getChargeCount
} from "../../../src/assets/js/api";
import { checkPermiss } from "../../assets/js/utlis";
export default {
  name: "LoanInfor",
  props: ["orderNumber"],
  data() {
    return {
      dialogTableVisible: false,
      orderStatus: "",
      //意向
      yx: {
        intentionMoney: "--",
        intentionRatio: "--",
        intentionAddMoney: "--",
        intentionServerMoney: "--"
      },
      //合同
      ht: {
        contractGuaranteeMoney: null,
        contractGuaranteeMonth: null,
        contractRepaymentModel: null
      },
      diaht: {},
      //权证
      qz: {
        pledgeTime: null,
        justTime: null
      },
      diaqz: {},
      diaqzRules: {
        pledgeTime: [
          {
            type: "date",
            required: true,
            message: "请选择抵押时间",
            trigger: "change"
          }
        ],
        justTime: [
          {
            type: "date",
            required: true,
            message: "请选择公正时间",
            trigger: "change"
          }
        ]
      },
      //财务
      cw: {
        chargeMoney: null,
        chargeInvoiceTime: null,
        chargeTime: null,
        calculateRatio: null,
        calculateAddMoney: null
      },
      contractRepaymentModel: [
        { lable: "等额本息", value: "等额本息" },
        { lable: "先息后本", value: "先息后本" },
        { lable: "等额本金", value: "等额本金" },
        { lable: "等额等息", value: "等额等息" }
      ],
      diacw: {},
      guaTitle: "修改",
      chargeTitle: "修改",
      warrantTitle: "修改",
      showdis: null,
      diaTitle: null,
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      },
      golbalPermissions: [],
      ProductUrl: ""
    };
  },
  created() {
    this.golbalPermissions = localStorage.getItem("permissions").split(",");
    this.status = eval(this.$route.query.status);
    if (!this.status) {
      this.getUpForm(this.orderNumber);
      this.getWarrant(this.orderNumber);
    }
    this.findProductUrl(this.orderNumber);
    this.getIntention();
  },
  computed: {
    //合同数据添加按钮
    showGuaranteeMoneyBtn: function() {
      return checkPermiss(
        "business:upForm:GuaranteeMoney",
        this.golbalPermissions
      );
    },
    //权证信息添加按钮
    showUpWarrantBtn: function() {
      return checkPermiss("business:upForm:upWarrant", this.golbalPermissions);
    },
    //财务信息添加按钮
    showChargeBtn: function() {
      return checkPermiss("business:upForm:charge", this.golbalPermissions);
    }
  },
  methods: {
    //填写核算点数，核算附加费算出收费
    countChangeMoney() {
      if (this.diacw.calculateRatio && this.diacw.calculateAddMoney) {
        getChargeCount({
          orderNumber: this.orderNumber,
          calculateRatio: this.diacw.calculateRatio,
          calculateAddMoney: this.diacw.calculateAddMoney
        }).then(res => {
          this.diacw.chargeMoney = res.data;
        });
      } else if (!this.diacw.calculateRatio) {
        this.$message.warning("请输入核算点数");
      } else {
        this.$message.warning("请输入核算附加费");
      }
    },
    //获取意向金额
    getIntention() {
      getIntention({ orderNumber: this.orderNumber }).then(res => {
        if (res.data) {
          this.yx = res.data;
        }
      });
    },
    //根据订单查询路由path路径
    findProductUrl(orderNumber) {
      getProductUrl({
        orderNumber: orderNumber
      }).then(res => {
        this.ProductUrl = res.data.productUrl;
       
          this.orderStatus=res.data.orderStatus;
        
       
        this.markUpdate = res.data.markUpdate;
      });
    },
    //根据订单号查询当前信息
    getUpForm(orderNumber) {
      let that = this;
      getUpForm({
        orderNumber: orderNumber
      }).then(res => {
        let data = res.data;
        that.ht.contractGuaranteeMoney = data.contractGuaranteeMoney;
        that.ht.contractGuaranteeMonth = data.contractGuaranteeMonth;
        that.ht.contractRepaymentModel = data.contractRepaymentModel;
        that.cw.chargeMoney = data.chargeMoney;
        that.cw.chargeInvoiceTime = data.chargeInvoiceTime;
        that.cw.chargeTime = data.chargeTime;
        that.cw.calculateRatio = data.calculateRatio;
        that.cw.calculateAddMoney = data.calculateAddMoney;
        if (
          that.ht.contractGuaranteeMoney == null &&
          that.ht.contractGuaranteeMonth == null
        ) {
          that.guaTitle = "添加数据";
          that.ht.contractRepaymentModel = "等额本息";
        }
        if (that.cw.chargeMoney == null && that.cw.chargeMoney == null) {
          that.chargeTitle = "添加数据";
        }
      });
    },
    getWarrant(orderNumber) {
      let that = this;
      getWarrant({ orderNumber: orderNumber }).then(res => {
        let data = res.data;
        that.qz.pledgeTime = data.pledgeTime;
        that.qz.justTime = data.justTime;
        if (that.qz.pledgeTime == null && that.qz.justTime == null) {
          that.warrantTitle = "添加数据";
        }
      });
    },
    openDiaGua() {
      this.showdis = 1;
      this.dialogTableVisible = true;
      this.diaht = JSON.parse(JSON.stringify(this.ht));
    },
    openDiaCharge() {
      this.showdis = 2;
      this.dialogTableVisible = true;
      this.diacw = JSON.parse(JSON.stringify(this.cw));
    },
    openWarrant() {
      this.showdis = 3;
      this.dialogTableVisible = true;
      this.diaqz = JSON.parse(JSON.stringify(this.qz));
    },
    //转换日期格式
    StrToGMT(time) {
      let GMT = new Date(time);
      return GMT;
    },
    //合同提交按钮
    submitGua() {
      this.diaht.orderNumber = this.orderNumber;
      postGuaranteeMoney(this.diaht).then(res => {
        if (res.code == 200) {
          this.getUpForm(this.orderNumber);
          this.guaTitle = "修改";
          this.dialogTableVisible = false;
          this.$message.success(res.message);
          //this.$router.push({ path: this.ProductUrl });
        }
      });
    },
    //财务提价按钮
    submitcharge() {
      this.diacw.orderNumber = this.orderNumber;
      if (this.diacw.chargeTime) {
        this.diacw.chargeTime = this.StrToGMT(this.diacw.chargeTime);
      }
      if (this.diacw.chargeInvoiceTime) {
        this.diacw.chargeInvoiceTime = this.StrToGMT(
          this.diacw.chargeInvoiceTime
        );
      }
      postCharge(this.diacw).then(res => {
        if (res.code == 200) {
          this.getUpForm(this.orderNumber);
          this.chargeTitle = "修改";
          this.dialogTableVisible = false;
          this.$message.success(res.message);
          //this.$router.push({ path: this.ProductUrl });
        }
      });
    },
    // 权证提交按钮
    submitwarrant() {
      this.diaqz.orderNumber = this.orderNumber;
      this.diaqz.justTime = this.StrToGMT(this.diaqz.justTime);
      this.diaqz.pledgeTime = this.StrToGMT(this.diaqz.pledgeTime);
      postWarrant(this.diaqz).then(res => {
        if (res.code == 200) {
          this.getWarrant(this.orderNumber);
          this.warrantTitle = "修改";
          this.dialogTableVisible = false;
          this.$message.success(res.message);
          //this.$router.push({ path: this.ProductUrl });
        }
      });
    }
  }
};
</script>

<style scoped type="less">
.posInput
{
    position: relative;
}
.pos
{
    position: absolute;  z-index: 2;
}
.pos.left
{
    left: 10px;
}
.pos.right
{
    right: 0;
}
.posInput ::v-deep .el-input__inner
{
    padding: 0 50px 0 40px;  text-align: center;
}
.posInput.ts ::v-deep .el-input__inner
{
    padding-left: 25px;
}
.toBe
{
    line-height: 35px;
}
.form_wrap ::v-deep .el-form-item,
.form_wrap ::v-deep .el-form-item__label,
.form_wrap ::v-deep .el-form-item__content,
.form_wrap ::v-deep .el-input,
.form_wrap ::v-deep .el-input__inner
{
    line-height: 32px;  height: 32px;
}
.form_wrap ::v-deep .el-form-item
{
    margin-bottom: 5px;
}
.form_wrap ::v-deep .el-col
{
    line-height: 32px;
}
.form_wrap ::v-deep .el-button
{
    padding: 8px 20px;
}
.form_wrap ::v-deep.el-input__icon
{
    line-height: 24px;
}
::v-deep .el-form-item__content
{
    text-align: left;
}
.el-date-editor.el-input
{
    width: auto;
}















</style>
